<template>
  <div class="error-container">
    <el-empty :image-size="300" description=" ">
      <template v-slot:image>
        <el-icon style="font-size: 100px;"><Pouring /></el-icon>
      </template>
      <div class="text-center">
        <h1 class="title">404</h1>
        <p class="description">页面找不见了</p>
        <el-button type="primary" @click="toHome" round>回到首页</el-button>
      </div>
    </el-empty>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const toHome = () => {
  router.push('/')
}
</script>

<style scoped lang="scss">
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.text-center {
  text-align: center;
}

.title {
  font-size: 60px;
  color: #333;
  margin-bottom: 10px;
}

.description {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
  transition: all 0.3s ease-in-out;

  &:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }
}
</style>